import React, { useState } from 'react';
import { Card, Table, Tag, Button, Space, Form, Row, Col, Input, Select, DatePicker } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import './styles.css';

const { RangePicker } = DatePicker;

interface PlatformData {
  id: string;
  city: string;
  status: 'online' | 'offline';
  heartbeatTime: string;
  createTime: string;
}

interface SearchParams {
  city?: string;
  status?: string;
  dateRange?: [string, string];
}

const PlatformList: React.FC = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 模拟数据
  const platforms: PlatformData[] = [
    {
      id: '1',
      city: '北京市',
      status: 'online',
      heartbeatTime: '2024-01-18 14:30:00',
      createTime: '2024-01-01 10:00:00'
    },
    {
      id: '2',
      city: '上海市',
      status: 'online',
      heartbeatTime: '2024-01-18 14:29:55',
      createTime: '2024-01-01 10:15:00'
    },
    {
      id: '3',
      city: '广州市',
      status: 'online',
      heartbeatTime: '2024-01-18 14:29:50',
      createTime: '2024-01-01 10:30:00'
    },
    {
      id: '4',
      city: '深圳市',
      status: 'online',
      heartbeatTime: '2024-01-18 14:29:45',
      createTime: '2024-01-01 11:00:00'
    },
    {
      id: '5',
      city: '杭州市',
      status: 'offline',
      heartbeatTime: '2024-01-18 14:00:00',
      createTime: '2024-01-02 09:00:00'
    }
  ];

  const handleSearch = (values: SearchParams) => {
    setLoading(true);
    console.log('Search params:', values);
    // 这里添加实际的搜索逻辑
    setTimeout(() => {
      setLoading(false);
    }, 500);
  };

  const handleReset = () => {
    form.resetFields();
    handleSearch({});
  };

  const columns: ColumnsType<PlatformData> = [
    {
      title: '城市',
      dataIndex: 'city',
      key: 'city',
      width: 200,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (status: string) => (
        <Tag color={status === 'online' ? 'success' : 'error'}>
          {status === 'online' ? '在线' : '离线'}
        </Tag>
      ),
    },
    {
      title: '最近心跳时间',
      dataIndex: 'heartbeatTime',
      key: 'heartbeatTime',
      width: 200,
      sorter: (a, b) => a.heartbeatTime.localeCompare(b.heartbeatTime),
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 200,
      sorter: (a, b) => a.createTime.localeCompare(b.createTime),
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space size="middle">
          <Button 
            type="link" 
            onClick={() => navigate(`/platform-integration/connector-list/${record.id}`)}
          >
            查看连接器列表
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="platform-list-container">
      <Card title="基础支撑平台列表">
        {/* 搜索表单 */}
        <Form
          form={form}
          onFinish={handleSearch}
          className="search-form"
        >
          <Row gutter={[16, 16]}>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Form.Item name="city" label="城市">
                <Input placeholder="请输入城市名称" allowClear />
              </Form.Item>
            </Col>
            <Col xs={24} sm={12} md={8} lg={6}>
              <Form.Item name="status" label="状态">
                <Select
                  placeholder="请选择状态"
                  allowClear
                  options={[
                    { label: '在线', value: 'online' },
                    { label: '离线', value: 'offline' },
                  ]}
                />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} md={16} lg={8}>
              <Form.Item name="dateRange" label="创建时间">
                <RangePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col xs={24} sm={24} md={24} lg={4} className="search-buttons">
              <Form.Item>
                <Space>
                  <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                    搜索
                  </Button>
                  <Button icon={<ReloadOutlined />} onClick={handleReset}>
                    重置
                  </Button>
                </Space>
              </Form.Item>
            </Col>
          </Row>
        </Form>

        {/* 数据表格 */}
        <Table
          columns={columns}
          dataSource={platforms}
          rowKey="id"
          loading={loading}
          pagination={{
            total: platforms.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条记录`,
          }}
        />
      </Card>
    </div>
  );
};

export default PlatformList; 